<template>
  <div>
    <van-nav-bar title="客户列表信息" left-arrow @click-left="onClickLeft">
      <template #right>
        <span style="color: #fff; marginright: 10px" @click="gocustomerXZ">新增</span>
      </template>
    </van-nav-bar>
    <van-search show-action placeholder="请输入搜索关键词">
      <template #action>
        <div>搜索</div>
      </template>
    </van-search>
    <ul>
      <li
        v-for="(item, index) in records"
        :key="index"
      >
        <div class="text" @click="goCustomer(item.id)">
          <p>
            客户名称 <span>{{ item.custName }}</span>
          </p>
          <p>
            联系方式 <span>{{ item.telephone }}</span>
          </p>
          <p>
            公司名称 <span>{{ item.company }}</span>
          </p>
          <p>
            职务<span>{{ item.position }}</span>
          </p>
        </div>
        <div class="btn">
          <button @click="govsitXZ">新增拜访</button>
          <button @click="govsitlist">拜访记录</button>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { cust } from "../request/api";
export default {
  data() {
    return {
      records: [],
    };
  },
  methods: {
    //返回首页
    onClickLeft() {
      this.$router.push("/home");
    },
    //去用户视图界面
    goCustomer(id) {
      this.$router.push({
        path: "/customer",
        query: {
          id: id,
        },
      });
    },
    //新增用户
    gocustomerXZ(){
      this.$router.push('/customerXZ')
    },
    //拜访记录
    govsitlist(){
      this.$router.push('/vsitlist')
    },
    govsitXZ(){
      this.$router.push('/vsitXZ')
    }
  },
  created() {
    cust({}).then((res) => {
      this.records = res.data.records;
    });
  },
};
</script>
 
<style lang = "less" scoped>
/deep/ .van-nav-bar__content {
  background: #003399;
  .van-nav-bar__title {
    color: #fff;
  }

  .van-icon {
    color: #fff;
  }
}
ul {
  li {
    background-color: #fff;
    margin-top: 10px;
    padding: 10px;
    box-sizing: border-box;
    .text {
      color: #999;
      border-bottom: 1px solid #ccc;
      margin-bottom: 10px;
      padding: 10px;
      box-sizing: border-box;
      p {
        margin: 10px 0;
      }
      span {
        color: #333;
        margin-left: 15px;
      }
    }
    .btn {
      margin-left: 130px;
      border: 0;
      button {
        border: 0;
        background-color: #003399;
        width: 90px;
        height: 30px;
        border-radius: 30px;
        font-size: 14px;
        color: #fff;
        margin-left: 10px;
      }
    }
  }
}
</style>